<!--经责大屏-->
<template>
  <div class="content" id="content">
    <!--    头部标题-->
    <div class="content-header">
      <div class="header-btn">
        <div class="btn" @click="back">
          <el-icon><HomeFilled /></el-icon>
          进入工作界面
        </div>
      </div>
    </div>
    <!--    内容区域-->
    <div class="content-body">
      <div class="body-generalSituation">
        <!--    审计项目概况-->
        <div class="generalSituation-title">
          <div class="title-left">审计项目概况</div>
          <div class="title-right">可纳入任期审计对象</div>
        </div>
        <div class="generalSituation-describe">
          自{{ projectOverall?.year }}年至今，共累计发起经责审计项目 {{ projectOverall?.numberOfAllAudit }}个，其中任中审计{{
            projectOverall?.numberOfAudits
          }}个，离任审计 {{ projectOverall?.outgoingAudit }}个；已完成{{ projectOverall?.numberOfCompleted }}个，进行中的
          {{ projectOverall?.numberOfOngoing }}个。
        </div>
        <div class="generalSituation-chart">
          <div class="body-item">
            <div class="item-title">时间分布</div>
            <!--              时间分布-->
            <div id="distributionOfTime"></div>
          </div>
          <div class="body-item">
            <div class="item-title">覆盖单位</div>
            <!--              覆盖单位-->
            <div id="mapChart"></div>
          </div>
          <div class="body-item">
            <div class="item-form">
              <div class="form-th">
                <div class="th-td">所属单位名称</div>
                <div class="th-td">负责人</div>
                <div class="th-td">任职时间/月</div>
                <div class="th-td">操作</div>
              </div>
              <div class="form-tr" v-for="(item, index) in auditTarget" :key="index">
                <div class="tr-td">{{ item.company }}</div>
                <div class="tr-td">{{ filtrationName(item.name) }}</div>
                <div class="tr-td">{{ item.employmentPeriod }}</div>
                <div class="tr-td" @click="examine(item)">查看</div>
              </div>
              <div class="form-noData" v-if="auditTarget.length === 0">暂无数据！</div>
            </div>
          </div>
        </div>
      </div>
      <ChartSet ref="chartRef"></ChartSet>
    </div>
    <!--    弹窗-->
    <el-dialog
      v-model="dialogVisible"
      title="可纳入任期审计对象详情"
      custom-class="content-dialog"
      center
      :show-close="false"
      modal-class="modal-class"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="dialog-header">
          <div :id="titleId" class="header-titleClass">可纳入任期审计对象详情</div>
          <el-icon class="header-close" @click="close"><CircleClose /></el-icon>
        </div>
      </template>
      <vxe-table height="100%" :data="tableData" align="center" class="body-scrollbar">
        <vxe-column field="companyName" title="公司名称"></vxe-column>
        <vxe-column field="company" title="所属单位名称"></vxe-column>
        <vxe-column field="flatType" title="所属单位类型"></vxe-column>
        <vxe-column field="name" title="负责人"></vxe-column>
        <vxe-column field="position" title="任职职位"></vxe-column>
        <vxe-column field="type" title="类型" show-overflow></vxe-column>
        <vxe-column field="employmentPeriod" title="任职时间/月" show-overflow></vxe-column>
        <vxe-column field="commencementOfOffice" title="任职开始日期" show-overflow></vxe-column>
        <vxe-column field="endOfService" title="任职结束日期" show-overflow></vxe-column>
        <!--        <vxe-column field="manpowerMandate" title="人力委托" show-overflow></vxe-column>-->
        <vxe-column field="auditSituation" title="本任期接受经济责任审计情况"></vxe-column>
        <vxe-column field="auditInitiationTime" title="审计开展时间" show-overflow></vxe-column>
        <vxe-column field="commencementOfAuditPeriod" title="审计期间(开始)" show-overflow></vxe-column>
        <vxe-column field="endOfAuditPeriod" title="审计期间(结束)" show-overflow></vxe-column>
      </vxe-table>
    </el-dialog>
  </div>
  <!--  地市最近审计情况弹窗-->
  <el-dialog v-model="mapPopUps" title="审计发现问题情况与发现整改情况" width="80%" center align-center class="cityPopUps">
    <div class="cityPopUps-findTheRectification">
      <div class="findTheRectification-body">
        <vxe-table height="100%" :data="mapData" align="center" class="body-scrollbar" :scroll-y="{ enabled: true }">
          <vxe-colgroup>
            <vxe-column field="projectName" title="项目名称" width="14%"></vxe-column>
            <vxe-column field="projectChiefAuditor" title="项目主审" width="6.7%"></vxe-column>
            <vxe-column field="state" title="状态" width="8.4%"></vxe-column>
            <vxe-column field="numberOfQuestions" title="问题个数" width="8.4%"></vxe-column>
            <vxe-column field="numberOfRectifiedProblems" title="已整改问题个数" width="11.7%"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="审计发现涉及金额(万元)">
            <vxe-column field="aggregate" title="总计" width="6.7%"></vxe-column>
            <vxe-column field="illegalAmount" title="违规金额" width="6.7%"></vxe-column>
            <vxe-column field="directLossesWasteMoney" title="直接损失浪费金额" width="6.7%"></vxe-column>
            <vxe-column field="manageIrregularAmounts" title="管理不规范金额" width="7.8%"></vxe-column>
            <vxe-column field="mishandlingOfSums" title="会计信息处理不当金额" width="18.4%"></vxe-column>
            <vxe-column field="theAmountAtRiskOfLoss" title="可能造成损失的风险金额" width="8.4%"></vxe-column>
            <vxe-column field="personalEconomicProblem" title="个人经济问题" width="6.7%"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="整改取得经济效益(万元)">
            <vxe-column field="increaseIncome" title="增加收入" show-overflow width="6.7%"></vxe-column>
            <vxe-column field="costSaving" title="节约成本（投资）" show-overflow width="6.7%"></vxe-column>
            <vxe-column field="recoverDamage" title="挽回损失" show-overflow width="6.7%"></vxe-column>
            <vxe-column field="avoidRisk" title="规避风险" show-overflow width="6.7%"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="审计成果利用(个)">
            <vxe-column field="perfectSystem" title="完善制度" show-overflow width="6.7%"></vxe-column>
            <vxe-column field="improveFlowScheme" title="改进流程" show-overflow width="6.7%"></vxe-column>
            <vxe-column field="itSystemTransformation" title="IT系统改造" show-overflow width="7.8%"></vxe-column>
            <vxe-column
              field="correctErrorsOrEnforceExecution"
              title="纠正错误或强化执行"
              show-overflow
              width="7.8%"
            ></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import * as echarts from "echarts";
import { markRaw, onMounted, ref } from "vue";
import { chartSetConfig } from "@/utils/chartSetConfig/chartSetConfig"; //图表公共配置
import { ZHEJIANGMAP } from "@/utils/zhejiang"; //地图文件
import ToolTipCard from "./components/toolTipCard.vue";
import ChartSet from "./components/chartSet.vue";
import dayjs from "dayjs";
import zigongsi from "@/assets/images/zigongsi.png";
import { useRouter } from "vue-router";
const router = useRouter();
const chartRef = ref(null);
/**
 * 跳转后台管理页面
 */
const back = () => {
  router.push("/auditTool/auditEvaluationSystem");
};
import { getRecentlyAuditedContentApi, getTermAuditObjectApi } from "@/api/byTheBigScreen"; //经责大屏api
/**
 * 获取可纳入任期审计对象查看权限
 * @returns {Promise<any>}
 */
const getJurisdiction = async () => {
  const data = await getTermAuditObjectApi();
  return data.data;
};
const { selfAdaption, tooltip, grid, axisLabel, splitLine } = chartSetConfig; //图表公共配置
const projectOverall = ref({}); //审计项目概况
const timeListMock = ref([]); //时间分布
const mapListMock = ref([]); //地图覆盖单位
const auditTarget = ref([]); //审计对象
const tableData = ref([]); //审计成果及整改效益系统
const dialogVisible = ref(false); //弹窗状态
import { ElMessage } from "element-plus";
/**
 * 查看按钮
 * @param row 行数据
 */
const examine = async (row) => {
  const showDialogVisible = await getJurisdiction();
  if (showDialogVisible) {
    tableData.value = [row];
    dialogVisible.value = true;
  } else {
    ElMessage.error("暂无权限访问");
  }
};
const distributionOfTime = ref(); //时间分布图表
const distributionOfTimeEcharts = () => {
  //获取图表容器
  distributionOfTime.value = markRaw(echarts.init(document.getElementById("distributionOfTime")));
  //图表响应式变化
  selfAdaption(distributionOfTime.value);
  const option = {
    tooltip,
    legend: {
      // 图列
      show: true,
      bottom: "2%",
      data: ["离任审计", "任中审计"],
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
    },
    // 配置
    grid,
    xAxis: {
      type: "category",
      data: timeListMock.value.map((item) => item.year),
      axisLabel: {
        interval: 0, //强制显示所有标签
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        //刻度线
        show: true,
        lineStyle: {
          color: "#799CB3",
          opacity: 0.24,
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "离任审计",
        barWidth: "32%", //柱形图宽度
        stack: "时间分布表",
        data: timeListMock.value.map((item) => item.outgoingAudit),
        type: "bar",
        itemStyle: {
          normal: {
            color: "#314FE0",
          },
        },
      },
      {
        name: "任中审计",
        barWidth: "32%", //柱形图宽度
        stack: "时间分布表",
        data: timeListMock.value.map((item) => item.numberOfAudits),
        type: "bar",
        itemStyle: {
          normal: {
            color: "#31B0E0",
          },
        },
      },
    ],
  };
  option && distributionOfTime.value.setOption(option); //挂载图表
  distributionOfTime.value.on("click", function (params) {
    chartRef.value.yearValue = params.name.replace("年", ""); //将年份数据的年字去掉，只保留数据部分
    chartRef.value.benefitOverviewApi();
    const elements = document.querySelector(".overview-body");
    // 将审计成果及整改效益总览的元素滚动到视图中，因为dom数组只有一条数据
    elements.scrollIntoView();
  });
};
const mapChart = ref(); //覆盖单位图表
const mapPopUps = ref(false); //地市最近审计情况弹窗
const mapData = ref([]); //地市弹窗数据
const mapChartEcharts = () => {
  const nameMap = "浙江省";
  mapChart.value = markRaw(echarts.init(document.getElementById("mapChart"))); //注册地图容器
  echarts.registerMap("浙江省", ZHEJIANGMAP);
  //地图响应式变化
  window.addEventListener(
    "resize",
    () => {
      mapChart.value.resize();
    },
    false,
  );
  const optionMap = {
    tooltip: {
      trigger: "item",
      show: true,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      padding: [0, 0, 0, 0],
      formatter: function (params) {
        const dom = document.createElement("div");
        // 这里处理params的数据来实现组件和数据的联动
        const list = params.data;
        // ToolTipCard为vue组件，直接import , 第二个参数为props
        const MyComponent = createApp(ToolTipCard, { list });
        const instance = MyComponent.mount(dom);
        // instance.$el 是获取到的是html
        return instance.$el;
      },
    },
    visualMap: {
      min: 0,
      max: 9999,
      right: 26,
      bottom: 10,
      itemWidth: 16,
      itemHeight: 16,
      textStyle: {
        color: "#fff",
      },
      align: "left",
      inverse: true,
      pieces: [
        {
          value: 0,
          label: "0次",
          color: "#86cdff",
        },
        {
          min: 1,
          max: 2,
          label: "1-2次",
          color: "#379efa",
        },
        {
          min: 3,
          max: 9999,
          label: "3次以上",
          color: "#006fd1",
        },
      ],
    },
    geo: {
      map: nameMap,
      show: true,
      aspectScale: 1,
      roam: false,
      layoutCenter: ["50%", "50%"],
      layoutSize: "100%",
      tooltip: {
        trigger: "item",
        show: false,
      },
      z: 0,
      itemStyle: {
        shadowColor: "#005ceb",
        shadowOffsetX: 8,
        shadowOffsetY: 8,
      },
    },
    series: [
      {
        // 地图块的相关信息
        type: "map",
        map: nameMap,
        zoom: 1,
        roam: false,
        selectedMode: false,
        z: 1,
        aspectScale: 1,
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        itemStyle: {
          areaColor: "#031E88", //背景颜色
          borderColor: "#B8E2FF", //选择时边框颜色
          borderWidth: 1,
        },
        emphasis: {
          itemStyle: {
            areaColor: "#B8E2FF", //选择时背景颜色
            borderColor: "#fff", //选择时边框颜色
            borderWidth: 3,
          },
          label: {
            show: true,
            color: "#042751",
            textBorderType: "solid",
            textBorderWidth: 1,
            textBorderColor: "#CDE5FF",
          },
        },
        label: {
          show: true,
          fontSize: 19,
          fontWeight: "bold",
          color: "#042751",
          textBorderType: "solid",
          textBorderWidth: 1,
          textBorderColor: "#CDE5FF",
        },
        data: mapListMock.value,
      },
      {
        tooltip: {
          show: true,
        },
        type: "scatter",
        name: "杭州市",
        coordinateSystem: "geo",
        symbol: "image://" + zigongsi, //图标地址
        symbolSize: [50, 50], //图标大小
        symbolOffset: [18, -18], //偏移量
        data: (() => {
          return mapListMock.value.filter((item) => {
            if (item.name === "子公司") {
              // 当为分公司时，需要把图标坐标放在value里面
              return (item.value = [119.476498, 29.898918]);
            }
          });
        })(),
      },
    ],
  };
  mapChart.value.setOption(optionMap);
  /**
   * 获取地市最近几年的审计情况
   */
  mapChart.value.on("click", async function (params) {
    const { data } = await getRecentlyAuditedContentApi(params.name);
    mapPopUps.value = true;
    mapData.value = data;
  });
};
/**
 * 任期已满超36个月（小于等于36的不展示）
 * @param row 行数据
 * @returns {string|any}
 */
const tenure = (row) => {
  const tenureValue = ref(); //任期
  if (row.endOfService === "至今") {
    // 结束日期是至今时
    tenureValue.value = dayjs().diff(dayjs(row.commencementOfOffice), "months");
  } else {
    tenureValue.value = dayjs(row.endOfService).diff(dayjs(row.commencementOfOffice), "months");
  }
  return tenureValue.value <= 36 ? "/" : tenureValue.value;
};
/**
 * 人名显示姓
 * @param name
 * @returns {String}
 */
const filtrationName = (name) => {
  // 根据姓名隐藏名，只显示姓
  return `${name.slice(0, 1)}**`;
};
import { getAuditTargetListApi, getProjectOverviewApi } from "@/api/byTheBigScreen"; //经责大屏api
/**
 * 异步获取大屏幕展示的数据
 * @returns {无} 该函数没有返回值，但会更新多个Vue响应式变量以用于前端展示
 */
const getByTheBigScreen = async () => {
  // 同时发起对审计项目概况和审计目标列表的API请求
  const [projectOverviewData, auditTargetListData] = await Promise.all([getProjectOverviewApi(), getAuditTargetListApi()]);
  // 筛选出就业期限超过36个月的审计目标，并更新auditTarget的值
  auditTarget.value = auditTargetListData.data.filter((item) => {
    item.employmentPeriod = tenure(item);
    // 返回符合条件的人员信息
    return item.employmentPeriod !== "/";
  }); // 可纳入任期审计对象
  projectOverall.value = projectOverviewData.data.projectOverall; // 审计项目概况
  timeListMock.value = projectOverviewData.data.timeListMock; // 时间分布
  mapListMock.value = projectOverviewData.data.mapListMock; // 地图覆盖单位
};
onMounted(async () => {
  await getByTheBigScreen(); //审计项目概况
  distributionOfTimeEcharts(); //时间分布
  mapChartEcharts(); //覆盖单位
});
</script>

<style scoped lang="less">
@import "@/assets/styles/byTheBigScreen/index.less";
</style>
<style lang="less">
.el-overlay-dialog {
  .cityPopUps {
    border-radius: 15px;
    margin-top: auto !important;
    background-color: #071537;
    .el-dialog__header {
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn {
        font-size: 20px;
        i.el-icon.el-dialog__close {
          color: #fff;
        }
      }
    }
    .el-dialog__body {
      .cityPopUps-findTheRectification {
        width: 100%;
        height: 576px;
        .findTheRectification-body {
          width: 100%;
          height: 100%;
          position: relative;
          background: #17254d;
          --vxe-table-header-background-color: transparent !important;
          --vxe-table-body-background-color: transparent !important;
          --vxe-table-border-color: transparent !important;
          overflow-x: auto;
          overflow-y: hidden;
          &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
          }
          /*滚动条的轨道*/
          &::-webkit-scrollbar-track {
            background: transparent;
          }
          /*滚动条里面的小方块，能向上向下移动*/
          &::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
          }
          .body-scrollbar {
            width: 150%;
          }
          .vxe-table--main-wrapper {
            background: transparent;
          }
          /*滚动条整体部分*/
          .vxe-table--render-default .vxe-table--border-line,
          .vxe-table--header-border-line {
            border: none;
          }
          thead {
            background: url("@/assets/images/formTitle@2x.png") no-repeat center/100% 100% !important;
            border: 1px solid red;
            .vxe-header--row {
              color: #cde5ff;
              font-weight: 700;
              .vxe-header--column {
                border-right: 1px solid #1a315c;
                border-left: 1px solid #1a315c;
              }
              &:nth-child(1) {
                height: 44px;
              }
              &:nth-child(2) {
                height: 64px;
                .vxe-header--column {
                  background-size: unset;
                  background-image: linear-gradient(180deg, rgba(24, 39, 79, 0.1) 0%, rgba(12, 45, 109, 0.1) 100%);
                  border: 1px solid #1a315c;
                  z-index: 2;
                }
              }
            }
          }
          tbody {
            .vxe-body--row {
              font-size: 14px;
              color: #cde5ff;
              font-weight: 400;
              .vxe-body--column {
                background-image: none;
              }
              &:nth-child(2n) {
                background-color: transparent;
              }
              &:nth-child(2n-1) {
                background-color: #19305b;
              }
            }
          }
        }
      }
    }
  }
}
</style>
